<template>
  <el-form-item label="" prop="email">
    <el-input placeholder="邮箱" v-model="loginRequest.email" :prefix-icon="User"></el-input>
  </el-form-item>

  <el-form-item label="" prop="code">
      <el-input  v-model="loginRequest.code" :prefix-icon="Lock" placeholder="邮箱验证码">
        <template #append>
            <el-button @click="sendEmail" type="danger" :disabled="state.sendEmailTimer!==null">{{ state.sendEmailText }}</el-button>
        </template>
      </el-input>
  </el-form-item>
</template>

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import {defineEmits, defineProps, reactive} from "vue";
const emit=defineEmits(["sendEmail"])

const state=reactive({
  sendEmailText:"发送验证码",
  sendEmailTimer:null,
  sendEmailMaxInterval:60
})
const props=defineProps({
  loginRequest:{
    type:Object,
    default:{}
  }
})

const sendEmail=()=>{

  if(state.sendEmailTimer)return

  emit('sendEmail')
  state.sendEmailText=state.sendEmailMaxInterval
  state.sendEmailTimer=setInterval(()=>{
    state.sendEmailText--
    if(state.sendEmailText<=0){
      state.sendEmailText="发送验证码"
      clearInterval(state.sendEmailTimer)
      state.sendEmailTimer=null
    }
  },1000)
}
</script>

<script>
export default {
  name: "EmailCodeItem"
}
</script>


<style scoped>

</style>